<style>
  header {
    align-items: center;
    justify-content: space-between;
  }

  header>div {
    align-items: center
  }

  header>div>span {
    margin-left: 20px;
    color: #EA733D;
  }

  .search {
    padding: 15px 0 13px 0;
    border-bottom: 1px solid #E3E3E5;
  }

  .color-cfcfcf {
    color: #cfcfcf;
    font-size: 12px;
  }

  .search-text {
    background: rgba(249, 249, 249, 1);
    height: 34px;
    position: relative;
    width: 220px;
    border-radius: 4px;
  }

  .search-text span {
    position: absolute;
    left: 8px;
    top: 0;
    line-height: 34px;
  }

  .search-text input {
    width: 100%;
    height: 100%;
    background: none;
    border: 0;
    outline: medium;
  }

  .mb-6 {
    margin: 14px 0 6px 0;
  }

  .calendar-text {
    background: rgba(249, 249, 249, 1);
    width: 140px;
    height: 34px;
    border-radius: 4px;
  }

  .calendar-text .hl-date-text {
    background: none;
    box-shadow: none;
    border: 0;
  }

  .flex-container input {
    width: 140px;
    height: 34px;
    text-indent: 8px;
    color: #333;
  }

  .hl-date-icon::before {
    top: 0;
    right: 0;
  }

  .show-hide-term {
    width: 59px;
    height: 30px;
    line-height: 30px;
    color: rgba(244, 174, 71, 1);
    margin: 20px 0 0 35px;
    background: rgba(244, 174, 71, 0.3);
    border-radius: 4px;
    text-align: right;
    padding-right: 5px;
    position: absolute;
    right: 0;
    top: 22px;
  }

  .dy-flexs {
    display: flex;
    position: relative;
  }

  .icon-Gm-edit:before {
    font-size: 14px;
    right: -5px;
    top: 10px;
    cursor: pointer;
  }

  .mark-yuce {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .yuce-contains {
    width: 615px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 0 18px rgba(80, 80, 80, .75);
  }

  .yuce-contains .title {
    line-height: 45px;
    text-align: center;
    height: 45px;
  }

  .yuce-contains .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
  }

  .yuce-orge {
    background-color: #f2f2f2;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .orge-footer {
    padding: 8px 0;
  }

  .select-yuce {
    position: absolute;
    right: 141px;
    top: 0;
    width: 120px;
  }

  .footer-template {
    position: fixed;
    bottom: 10px;
  }

  .table-container {
    width: 100%;
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75) inset;
    background: #fff;
    border-radius: 6px;
    border: 1px solid rgba(229, 229, 229, 1);
  }

  .table-container ul {
    display: flex;
    border-bottom: 1px solid #E8E5E2;
  }

  .table-container ul:last-child {
    border: none
  }

  .table-container ul li {
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #E8E5E2;
  }

  .table-container ul li:last-child {
    border: none
  }

  .global_screening_container {
    position: relative;
  }

  .hl-list-title {
    overflow: visible
  }

  .createBut {
    width: 110px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid rgba(85, 93, 157, 1);
    cursor: pointer;
    color: #565E99;
    margin-left: 10px;
  }

  .mb-12 {
    margin-bottom: 12px;
  }

  .auth-config-pop .auth-item::before {
    left: 20px;
    top: 14px;
  }

  .table-title li {
    color: #999;
  }

  .open-active {
    background: #ED885B;
    color: #fff;
  }

  .opera {
    cursor: pointer;

  }

  .select-ul-S {
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75) inset;
    border: 1px solid rgba(229, 229, 229, 1) !important;
    border-radius: 4px;
  }

  .global_table_item .text-align {
    display: flex;
    align-items: center;
    justify-content: center
  }

  .global_table_item li div {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center
  }

  .newItem {
    display: flex;
    justify-content: center;
    align-items: center
  }

  .dialogTitle {
    width: 120px;
    text-align: right;
  }

  .hl-dialog .hl-dialog__body {
    overflow: visible;
  }
</style>

<main id="voucher" class="pl-24 pr-24">
  <header class="hl-list-title  dy-flexs">
    <div class="dy-flexs">
      <h4>财务凭证</h4>
      <span>当前开账年月 {{showYY_MM}}</span>
      <span class="icon-Gm-calendar icon-Gm-edit" @click="billSwidthBut" v-if="permissions.indexOf('c319') > -1"></span>
    </div>
    <div class="dy-flex">
      <hl-select :data="projectList" v-model="selectedData" :width="200" placeholder="请选择项目"></hl-select>
      <div class="createBut" @click="createVoucher" v-if="permissions.indexOf('c320') > -1">生成凭证</div>
    </div>
  </header>

  <section class="search relative">
    <div class="dy-flexs relative">
      <div class="mr-10">
        <p class="color-cfcfcf mb-6">信息检索</p>
        <div class="search-text">
          <span class="icon-Gm-search"></span>
          <input style="text-indent: 25px;" type="text" class="" v-model="keyword" placeholder="客户/合同名称/编号/管理编号......"
            title="客户/合同名称/编号/管理编号/账单编号/创建人" />
        </div>
      </div>
      <div class="mr-10">
        <p class="color-cfcfcf mb-6">凭证类别</p>
        <hl-select :data="acctVoucherTypes" v-model="voucherTypeName" :width="140"></hl-select>
      </div>

      <div class="mr-10">
        <p class="color-cfcfcf mb-6">凭证日期</p>
        <div class="clearfix">
          <div class="calendar-text pull-left">
            <web-calendar tips="起始时间" v-model="voucherBeginDate" :afterdate="voucherEndDate"></web-calendar>
          </div>
          <div class="pull-left line-height-34 color-999 plr-12">-</div>
          <div class="calendar-text pull-left">
            <web-calendar tips="截止时间" v-model="voucherEndDate" :beforedate="voucherBeginDate"></web-calendar>
          </div>
        </div>
      </div>
      <div class="dy-flexs" style="align-items: flex-end;" v-show="!isExtenseFlag">
        <button type="button" class="btn s-btn-default mr-10" @click="search">查询</button>
        <button type="button" class="btn s-btn-default" @click="reset">重置</button>
      </div>
    </div>
    <!-- <div class="dy-flexs relative" v-show="isExtenseFlag">
      <div class="mr-10">
        <p class="color-cfcfcf mb-6">项目</p>
        <hl-select :data="projectList" v-model="selectedProject" :width="220" @on-change="getBuildingList"></hl-select>
      </div>
      <div class="mr-10">
        <p class="color-cfcfcf mb-6">楼栋</p>
        <hl-select :data="buildingList" v-model="selectedBuilding" :width="140" @on-change="getFloorList"></hl-select>
      </div>
      <div class="mr-10">
        <p class="color-cfcfcf mb-6">楼层</p>
        <hl-select :data="floorList" v-model="selectedFloor" :width="140" @on-change="getUnitList"></hl-select>
      </div>
      <div class="mr-10">
        <p class="color-cfcfcf mb-6">单元</p>
        <hl-select :data="unitList" v-model="selectedUnit" :width="140"></hl-select>
      </div>
    </div> -->
    <div class="dy-flexs relative" v-show="isExtenseFlag">
      <div class="mr-10">
        <p class="color-cfcfcf mb-6">项目</p>
        <hl-select :data="projectList" v-model="selectedProject" :width="220" @on-change="getBuildingList"></hl-select>
      </div>
      <div class="mr-10">
        <p class="color-cfcfcf mb-6">业务日期</p>
        <div class="clearfix">
          <div class="calendar-text pull-left">
            <web-calendar tips="起始时间" v-model="orderBeginDate" :afterdate="orderEndDate?orderEndDate:''"></web-calendar>
          </div>
          <div class="pull-left line-height-34 color-999 plr-12">-</div>
          <div class="calendar-text pull-left">
            <web-calendar tips="截止时间" v-model="orderEndDate" :beforedate="orderBeginDate">
            </web-calendar>
          </div>
        </div>
      </div>
      <div class="dy-flexs" style="align-items: flex-end;">
        <button type="button" class="btn s-btn-default mr-10" @click="search">查询</button>
        <button type="button" class="btn s-btn-default" @click="reset">重置</button>
      </div>
    </div>

    <div class="global_open_sign" @click="openSearch">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>
  </section>
  <!-- 筛选区 -->
  <div class="global_screening_container">
    <div class="global_screening_list">
      <li v-for="(item,index) in screeningList" @click="selectScreening(item.code)"
        :class="{active: screeningStatus.indexOf(item.code) > -1}">{{item.name}}({{item.num}})</li>
    </div>
    <span class="global_refresh_icon icon-uniE94B" style="left:610px" @click="resetStatus"></span>

  </div>
  <!--定宽横向滑动表格-->
  <div class="business_mange br-4 clearfix relative global_table config-table-container auth-config-pop"
    style="margin:0 0 10px 0;border:1px solid #E5E5E5" @mouseenter="showScroll" @mouseleave="hideScroll">
    <div class="config-table-wrap" style="overflow-x:scroll;marginRight:200px;">
      <div style="width:1200px;">
        <ul class="dy-flex l-h-40 text-center global_table_title">
          <li class="dy-fx-1" v-if="pushFlag">
            <span class="auth-item" @click="selectAllPushId" :class="{'js-q-active':isAllFlag}"></span>
          </li>
          <li class="dy-fx-2">序</li>
          <li class="dy-fx-2">会计年</li>
          <li class="dy-fx-2">会计期间</li>
          <li style="width: 180px;">项目名称</li>
          <li style="width: 180px;">客户名称</li>
          <li style="width: 180px;">业务类型</li>
          <li class="dy-fx-3" @click="runkDate('VD')">
            凭证日期
            <span
              :class="{'icon-Gm-sort-default': columns != 'VD', 'icon-Gm-sort-ascending': orders == 'ASC' && columns == 'VD', 'icon-Gm-sort-descending': orders == 'DESC' && columns == 'VD'}">
              <span class="path1"></span><span class="path2"></span>
            </span>
          </li>
          <li class="dy-fx-3">业务日期</li>

          <!-- <li class="dy-fx-3" @click="runkDate('DD')">制单日期
            <span
              :class="{'icon-Gm-sort-default': columns != 'DD', 'icon-Gm-sort-ascending': orders == 'ASC' && columns == 'DD', 'icon-Gm-sort-descending': orders == 'DESC' && columns == 'DD'}">
              <span class="path1"></span><span class="path2"></span>
            </span>
          </li> -->
          <li class="dy-fx-3">创建人</li>
          <li class="dy-fx-2">推送状态</li>
        </ul>
        <div>
          <ul class="dy-flex  text-center border-t global_table_item" v-for="(item, index) in data.acctVouchers">
            <li class="dy-fx-1" v-if="pushFlag">
              <span class="auth-item" @click="selectPushId(item.id)"
                :class="{'js-q-active':pushIds.indexOf(item.id) != -1}"></span>
            </li>
            <li class="dy-fx-2 text-align">
              {{index + 1 < 10 ? '0' + (index + 1) : index + 1}}
            </li>
            <li class="dy-fx-2 text-align">{{item.voucherYear}}</li>
            <li class="dy-fx-2 ellipsis-1 text-align">{{item.voucherPeriod}}</li>

            <li class="text-align" style="width: 180px;"><span class="ellipsis-1"
                :title="item.projectName">{{item.projectName || '--'}}</span>
            </li>
            <li class="text-align" style="width: 180px;"><span class="ellipsis-1"
                :title="item.customerName">{{item.customerName || '--'}}</span>
            </li>
            <li class="text-align" style="width: 180px;"><span
                class="ellipsis-1">{{item.voucherBizCategoryName || '--'}}</span></li>




            <li class="dy-fx-3 ellipsis-1 text-align">{{item.voucherDate | formatDate}}</li>

            <li class="dy-fx-3 ellipsis-1 text-align">{{item.documentingDate | formatDate}}</li>


            <!-- <li class="dy-fx-3 ellipsis-1 text-align">{{item.documentingDate | formatDate}}</li> -->
            <li class="dy-fx-3 ellipsis-1 text-align">{{item.documentingUserName || '--'}}</li>
            <li class="dy-fx-2">
              <div>{{item.pushFlag == 'Y'?'已推送':'未推送'}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="border-l  text-center config-table-operate-wrap" style="width:200px;">
      <ul>
        <li class="color-gray pl-12 pr-12 global_table_title l-h-40">操作</li>
        <div>
          <li class="border-t operation pl-12 pr-12 global_table_item newItem"
            v-for="(item, index) in data.acctVouchers">
            <div>
              <div v-for="item0 in item.debtorANDLenderVOs" style="width: 1px;height:40px"></div>
            </div>
            <a class="mr-5" target="_blank" @click="editItem(item)">编辑</a>
            <a class="mr-5" target="_blank" @click="invalidItem(item)">作废</a>
            <a class="mr-5" target="_blank" @click="goTodetail(item)">详情</a>
          </li>
        </div>
      </ul>
    </div>
  </div>
  <!-- 分页 -->
  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{data.totalCount || '0'}}</i>条记录</span>
      <span>每页
        <div class="select-ul pagenums">
          <span class="select-name br-4 box-i-shadow">10</span>
          <ul>
            <li v-for="item in pageLimits" @click="setMoreNum(item)">{{item}}</li>
          </ul>
        </div>
        条</span>
    </div>
    <div class="pull-right">
      <ul class="page" id="page"></ul>
    </div>
  </div>
  <!-- 导出 -->
  <button type="button" class="btn n-btn-primary mr-10" @click="exportBut" style="margin-top: 20px"
    v-if="permissions.indexOf('c321') > -1" v-show="!pushFlag">导出</button>
  <button type="button" class="btn n-btn-primary" @click="pushBut" style="margin-top: 20px"
    v-if="permissions.indexOf('c377') > -1" v-show="!pushFlag">推送</button>
  <button type="button" class="btn n-btn-primary mr-10" @click="submitPush" style="margin-top: 20px"
    v-if="pushFlag">确定</button>
  <button type="button" class="btn n-btn-primary" @click="pushFlag = false" style="margin-top: 20px"
    v-if="pushFlag">取消</button>
  <!-- 开张设置 -->
  <div class="mark-yuce" v-if="isbill">
    <div class="yuce-contains  box-o-shadow" style="width:730px;">
      <div class="title">开账月设置</div>
      <div class="close" @click="isbill = false">x</div>
      <div class="yuce-orge" style="padding: 16px 34px 32px 34px">
        <div class="dy-flex" style="width:100%;justify-content: flex-start;align-items: center;margin-bottom:10px">
          <p class="color-666 mr-10">会计年</p>
          <div style="width: 140px;" class="mr-10">
            <div class="select-ul ">
              <span class="select-name info select-ul-S" ref="project">{{selectYear}}</span>
              <ul>
                <li v-for="item in openYears" @click="setYear(item)">{{item}}</li>
              </ul>
            </div>
          </div>
          <p style="color:#EA733D">当前开账年月{{showYY_MM}}</p>
        </div>
        <div class="table-container">
          <ul class="table-title">
            <li style="width: 114px">会计期间</li>
            <li style="width: 250px">凭证时间段</li>
            <li style="width: 154px">状态</li>
            <li style="width: 141px">操作</li>
          </ul>
          <ul v-for="item in configList" :class="{'open-active':item.status == 'OPEN'}">
            <li style="width: 114px">{{item.voucherPeriod}}</li>
            <li style="width: 250px">{{item.beginDate | formatDate }}至{{item.endDate | formatDate}}</li>
            <li style="width: 154px">{{item.status == 'OPEN'?'开账':'关账'}}</li>
            <li style="width: 141px" class="opera" :style="{color:item.status == 'CLOSED'?'#476799':''}"
              @click="switchFunc(item)">{{item.status == 'OPEN'?'关账':'开账'}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 导出凭证 -->
  <div class="mark-yuce" v-if="isExport">
    <div class="yuce-contains  box-o-shadow" style="width:460px;">
      <div class="title">导出凭证</div>
      <div class="close" @click="isExport = false">x</div>
      <div class="yuce-orge" style="padding:16px 63px 46px 63px;align-items:flex-start">
        <div class="color-666 mb-12">选择项目：</div>
        <hl-select :data="projectList" v-model="exportPro" :width="156"></hl-select>
        <div class="color-666 mb-12 mt-15">选择制单日期：</div>
        <div class="clearfix mb-12">
          <div class="calendar-text pull-left" style="width: 150px">
            <web-calendar tips="起始时间" v-model="exportBeginDate" ref="date_begin"
              :afterdate="exportEndDate?exportEndDate:''"></web-calendar>
          </div>
          <div class="pull-left line-height-34 color-999 plr-12">-</div>
          <div class="calendar-text pull-left" style="width: 150px">
            <web-calendar tips="截止时间" v-model="exportEndDate" ref="date_end" :beforedate="exportBeginDate">
            </web-calendar>
          </div>
        </div>
        <div class="color-999 mb-12">批量导出制单时间段至多两个自然月</div>
      </div>
      <div class="orge-footer text-center">
        <button type="button" class="btn n-btn-primary" style="width:90px;min-width:80px;margin-right:50px"
          @click="exportFunc">确认</button>
        <button type="button" class="btn n-btn-outline" @click="isExport = false">取消</button>
      </div>
    </div>
  </div>
  <!-- 编辑单条凭证 -->
  <hl-dialog title="编辑" :visible="editFlag" @on-close="editFlag = !editFlag" width="480">
    <div style="padding: 20px 0 30px;">
      <div class="dy-flex mb-12" style="align-items: center;">
        <div class="dialogTitle">凭证日期：</div>
        <web-calendar type="primary" v-model="editObj.voucherDate" width="240"></web-calendar>
      </div>
      <div class="dy-flex" style="align-items: center;">
        <div class="dialogTitle">创建人：</div>
        <input type="text" class="form-control" style="width: 240px;" v-model="editObj.documentingUserName">
      </div>
    </div>
    <div slot="footer">
      <hl-button type="primary" @on-click="saveEdit">确认</hl-button>
      <hl-button type="outline" @on-click="editFlag = !editFlag">取消</hl-button>
    </div>
  </hl-dialog>





  <hl-loading :text=" '正在生成凭证，请稍候' " v-if="flagload"></hl-loading>
</main>

<script src="modules/voucher/scripts/index.js" type="text/javascript" charset="utf-8"></script>